import { useEffect, useRef } from 'react'
import { Button, ButtonRef } from '@/library/gallery/components/Button'
import { DemoBlock } from '@/library/widgets/DemoBlock'
import { Space } from '@/library/gallery/components/Space'
import styles from './index.module.scss'

export const sleep = <T extends number = number>(time: T): Promise<T> => new Promise((resolve) => {
  setTimeout(resolve, time)
})

export default function DemoButton(): React.ReactNode {
  const btnRef = useRef<ButtonRef>(null)

  useEffect(() => {
    if (btnRef.current) {
      console.info(btnRef.current.nativeElement?.dataset.age)
    }
  }, [])

  return (
    <>
      <DemoBlock title="button-pattern">
        <Space wrap>
          <Button pattern="primary">Primary</Button>
          <Button pattern="success">Success</Button>
          <Button pattern="default">Default</Button>
          <Button pattern="warning">Warning</Button>
          <Button pattern="danger">Danger</Button>
        </Space>
      </DemoBlock>
      <DemoBlock title="button-fill">
        <Space>
          <Button pattern="primary" fill="solid">solid</Button>
          <Button fill="outline">default-outline</Button>
          <Button pattern="success" fill="outline">outline</Button>
          <Button pattern="warning" fill="none">none</Button>
        </Space>
      </DemoBlock>
      <DemoBlock title="button-shape">
        <Space justify="between">
          <Button pattern="primary" onClick={() => console.info('点击事件')}>default</Button>
          <Button pattern="primary" shape="rounded">rounded</Button>
          <Button pattern="primary" shape="rectangular">rectangular</Button>
        </Space>
      </DemoBlock>
      <DemoBlock title="button-disabled">
        <Space>
          <Button pattern="default" onClick={() => console.info('点击事件-button-disabled')} disabled>disabled</Button>
          <Button pattern="primary" disabled>disabled</Button>
          <Button pattern="success" disabled>disabled</Button>
          <Button pattern="warning" disabled>disabled</Button>
        </Space>
      </DemoBlock>
      <DemoBlock title="button-loading">
        <Space wrap>
          <Button pattern="primary" loadingText="加载中" loading>primary-loading</Button>
          <Button pattern="warning" loading />
          <Button
            pattern="primary"
            loading="auto"
            onClick={async () => {
              await sleep(3000)
            }}
          >
            Auto Loading
          </Button>
        </Space>
      </DemoBlock>
      <DemoBlock title="自定义" background="var(--rta-color-weak)">
        <Space justify="between">
          <Button style={{ borderRadius: '22px' }}>style</Button>
          <Button className={styles['test-class']} pattern="primary">class</Button>
          <Button ref={btnRef} data-age={18} pattern="success">data-*</Button>
        </Space>
      </DemoBlock>
      <DemoBlock title="button-block">
        <Button pattern="warning" block />
      </DemoBlock>
    </>
  )
}
